<script setup lang="ts" name="list_index">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from 'echarts';
import { auto } from "@popperjs/core";
import airtrend from "./airtrend/airtrend.vue";
import { CirclePlus, Search, Refresh, EditPen, Share, Notebook, Setting } from '@element-plus/icons-vue'
import { url } from "inspector";
import { ElTable } from 'element-plus'

const router = useRouter();

// 表格
interface User {
    date: string
    name: string
    address: string
}
// 开关
const value2 = ref(true)
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<any[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
const tableData: any[] = [
    {
        date: '1',
        name: '166511621321312',
        codeNumber: '张三',
        cardNumber: '1301998462547915',
        state: '2022-04-26',
        control: '',
        voltage: '已绑定',
    },
    {
        date: '2',
        name: '654651651661616',
        codeNumber: '王安石',
        cardNumber: '1301998462547915',
        state: '2022-04-26',
        control: '',
        voltage: '已绑定',
    },
    {
        date: '3',
        name: '6546515616111961',
        codeNumber: '李暗',
        cardNumber: '1301998462547915',
        state: '2022-04-26',
        control: '',
        voltage: '已绑定',
    },
    {
        date: '4',
        name: '9871315198132132',
        codeNumber: '王强',
        cardNumber: '1301998462547915',
        state: '2022-04-26',
        control: '',
        voltage: '已绑定',
    },
    {
        date: '5',
        name: '984651657498411313',
        codeNumber: '刘熊',
        cardNumber: '1301998462547915',
        state: '2022-04-26',
        control: '',
        voltage: '已绑定',
    },
    {
        date: '6',
        name: '98765132468745454',
        codeNumber: '赵发',
        cardNumber: '1301998462547915',
        state: '2022-04-26',
        control: '',
        voltage: '已绑定',
    },
    {
        date: '7',
        name: '65431313211546131',
        codeNumber: '刘天宇',
        cardNumber: '1301998462547915',
        state: '2022-04-26',
        control: '',
        voltage: '已绑定',
    },
]

// 选择器
const options = [
  {
    value: 'guide',
    label: '已绑定',
  },
  {
    value: 'component',
    label: '未绑定',
  },
]

// 页面搜索重置输入框
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')

// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

onMounted(() => {

})

</script>

<template>
  <div class="dust">
    <!-- 页面搜索重置输入框 -->
    <div class="dust-box">
      <el-row>
        <el-col :span="5">
          <span>安全帽序列号：</span><el-input v-model="input1" placeholder="请输入安全帽序列号" clearable  style="width: 220px;"/>
        </el-col>
        <el-col :span="5">
          <span>绑定人：</span><el-input v-model="input2" placeholder="请输入绑定人" clearable style="width: 220px;"/>
        </el-col>
        <el-col :span="5">
          <span>身份证号：</span><el-input v-model="input3" placeholder="请输入绑定人身份证号" clearable style="width: 220px;"/>
        </el-col>
        <el-col :span="5">
          <span>绑定状态：</span><el-cascader :options="options" clearable />
        </el-col>
        <el-col :span="4">
          <el-button type="primary" :icon="Search">查询</el-button>
          <el-button type="warning" :icon="Refresh">重置</el-button>
          <el-button type="success" :icon="CirclePlus">新增</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- top -->
    <div class="dust-top">
       <!-- 列表 -->
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" />
            <el-table-column label="序号" width="60" align="center">
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" label="安全帽序列号" show-overflow-tooltip width="300" align="center"/>
            <el-table-column property="codeNumber" label="绑定人姓名" show-overflow-tooltip align="center"/>
            <el-table-column property="cardNumber" label="绑定人身份证号" show-overflow-tooltip align="center"/>
            <el-table-column property="state" label="创建日期" show-overflow-tooltip align="center"/>
            <el-table-column property="voltage" label="绑定状态" show-overflow-tooltip align="center"/>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button size="small" type="success" @click="(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
      <!-- 分页 -->
      <div class="demo-pagination-block">
        <el-pagination v-model:currentPage="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 20, 30, 40]"
          :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
          :total="40" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<style  lang="scss" scoped>
// .xxx-x {
//   width: 100%;
//   height: 100%;
// }
// 总页面
.dust {
  width: 100%;
  height: 100%;
  // padding: 50px;
  text-align: center;
  background: #141414;
  // padding: 24px;
}

// 查询重置新增
.dust-box {
  text-align: center;
  padding-top: 20px;
}

// 列表

// 分页
.demo-pagination-block {
  margin-top: 20px;
  background: #141414;
}
</style>
